<template>
  <div class="descriptions">
    <el-descriptions
      class="margin-top"
      :column="column"
      size="medium"
      direction="vertical"
    >
      <!-- 文字的方向做参数传递  列数传参  标题传参-->
      <template slot="title">
        <div class="title">
          <div class="blueBox"></div>
          <span>{{ title }}</span>
        </div>
      </template>
      <el-descriptions-item
        v-for="(desItem, index) in list"
        :key="index"
        :label="desItem.label"
        class="descriptionItem"
      >
        <span class="content">
          {{ desItem.content }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "description",
  props: ["list", "column", "title"],
  data() {
    return {};
  },
  watch: {
    list(newList) {
      this.list = newList;
    },
    column(newColumn) {
      this.column = newColumn;
    },
    title(newTitle) {
      this.title = newTitle;
    },
  },
};
</script>

<style scoped lang="scss">
.descriptions {
  margin: 10px 0;
  .blueBox {
    width: 3px;
    height: 14px;
    background: #1d6fe9;
  }

  .title {
    width: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
      font-size: 14px;
      margin-left: 4px;
      margin-top: 1px;
    }
  }
  .el-descriptions-item__cell {
    font-size: 14px;
    color: #666;
  }
  .content {
    color: #000;
  }

  ::v-deep .el-descriptions__header {
    margin-bottom: 10px;
  }
  ::v-deep .el-descriptions__body {
    padding: 5px;
    background: #fafafa;
  }
}
</style>
